﻿@model FairyWorld.Models.User

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/BlankLayout.cshtml";
}

<style>
#popupcontent{   position: absolute;   visibility: hidden;   overflow: hidden;   border:1px solid #CCC;   background-color:#F9F9F9;   border:1px solid #333;   padding:5px;}
</style>
<script>
    function cancel() {
        window.location.href = "/User/Info";
    }
    function showicon() {
        if (document.getElementById("headicon").style.visibility == "hidden") {
            document.getElementById("headicon").style.visibility = "visible";
            document.getElementById("head").innerHTML = "收起";
        }
        else {
            document.getElementById("head").innerHTML = "保存头像";
            document.getElementById("headicon").style.visibility = "hidden";
        }
    }
    function update(i) {
        document.getElementById("save").innerHTML = "选择头像" + i;
        var str;
        if (i <= 3)
            str = "../../content/image/head/boyicon" + i + ".jpg";
        else
            str = "../../content/image/head/girlicon" + (i - 3) + ".jpg";
        $.post("/User/UpdateIcon", { "url": str });
    }
    function upload() {
        var upl = document.getElementById("upl");
        var popUp = document.getElementById("popupcontent");
        popUp.innerHTML = '<div align="center">添加文件：</p><p><input id="fileInput1" name="fileInput1" type="file"/></p></div>'
            + document.getElementById("inf").innerHTML + '<div align="center"><div class="btn" onclick="hidePopup()" align="center">关闭</div></div>';
        popUp.style.top = "250px";
        popUp.style.left = "450px";
        popUp.style.width = "450px";
        popUp.style.height = "200px";
        popUp.style.visibility = "visible";
        $('#fileInput1').uploadify({
            'uploader': '/Content/uploadify.swf',
            'script': '/User/ImportIcon',
            'folder': '/Content/image/head',
            'cancelImg': '/Content/cancel.png',
            'sizeLimit': 1024 * 1024 * 10, //10M
            'multi': false,
            'onComplete': fun
        });
    }
    var fun = function (event, queueID, fileObj, response, data) {
        alert("成功上传头像");
        hidePopup();
        if (response != "") {
            document.getElementById("result").innerHTML = "成功上传" + response + "。";
            //       update(Model.name);
        }
        else {
            document.getElementById("result").innerHTML = "上传文件出错!";
        }
    }

    //显示提示信息，textstyle2为绿色，即正确信息；textstyl1为红色，即错误信息
    var showInfo = function (msg, type) {
        var msgClass = type == true ? "textstyle2" : "textstyle1";
        $("#result").removeClass();
        $("#result").addClass(msgClass);
        $("#result").html(msg);
    }
    function hidePopup() {
        var popUp = document.getElementById("popupcontent");
        popUp.innerHTML = "";
        popUp.style.visibility = "hidden";
        document.getElementById("Save").innerHTML = "";
    }
    
    //如果点击‘导入文件’时选择文件为空，则提示
    function checkImport() {
        if ($.trim($('#fileInput1Queue').html()) == "") {
            alert('请先选择要导入的文件！');
            return false;
        }
        return true;
    }
</script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>编辑个人信息</legend>

        @Html.HiddenFor(model => model.UserId)

        <div class="display-label">用户名</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.username)
            @Html.ValidationMessageFor(model => model.username)
        </div>

        <div class="editor-label">密码</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.password)
            @Html.ValidationMessageFor(model => model.password)
        </div>

        <div class="editor-label">确认密码</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ConfirmPassword)
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
        </div>

        <div class="editor-label">电话号码</div>
        <div class="editor-field">
            @Html.EditorFor(model => model.phone)
            @Html.ValidationMessageFor(model => model.phone)
        </div>

        <div class="btn" onclick="showicon()" id="head">更改头像</div>
        <div style="visibility:hidden" id="headicon">
            <a onclick="update(1)"><img src="../../content/image/head/boyicon1.jpg" class="img-circle" style="width:40px"/></a>
            <a onclick="update(2)"><img src="../../content/image/head/boyicon2.jpg" class="img-circle" style="width:40px"/></a>
            <a onclick="update(3)"><img src="../../content/image/head/boyicon3.jpg" class="img-circle" style="width:40px"/></a>
            <a onclick="update(4)"><img src="../../content/image/head/girlicon1.jpg" class="img-circle" style="width:40px"/></a>
            <a onclick="update(5)"><img src="../../content/image/head/girlicon2.jpg" class="img-circle" style="width:40px"/></a>
            <a onclick="update(6)"><img src="../../content/image/head/girlicon3.jpg" class="img-circle" style="width:40px"/></a>
            <div class="btn" onclick="upload()" id="upl">上传头像</div>
            <div id="save"></div>
        </div>
        <div>
            <button type="submit" class="btn" style="margin-top:20px">保存更改</button>
            <input type="button" class="btn" onclick="cancel()" style="margin-left:52px;margin-top:20px" value="取消更改" />
        </div>
    </fieldset>
}
<div id="inf" style="visibility:hidden;height:0px">    
    <div align="center">
    <p style="margin-top:5px;font-size:14px;font-weight:bold;"></p>
    <a href="javascript:if(checkImport()){$('#fileInput1').uploadifySettings('scriptData',{'name':$('#test').val()});$('#fileInput1').uploadifyUpload();}">导入文件</a>
    <p style="margin-top:5px;font-size:14px;font-weight:bold;"><span id="result"></span></p>
    </div>
</div>
<div id="popupcontent" style="visibility:hidden;height:0px">
</div>